<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:text="${'Cron表达式-'+title}"></title>
    <link rel="icon" href="/favicon.svg" type="image/x-icon">
    <link th:href="${public_cdn + '/twitter-bootstrap/3.3.5/css/bootstrap.min.css'}" rel="stylesheet">
    <link rel="stylesheet" th:href="${public_cdn + '/chosen/1.4.2/chosen.min.css'}">
    <link rel="stylesheet" href="/static/tool/cron/cron.css">
</head>
<body>
<div>

    <!-- 可视化操作 -->
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">界面操作</h3>
        </div>

        <div class="panel-body">
            <div>
                <!-- Nav Tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#second" aria-controls="second" role="tab" data-toggle="tab">秒</a>
                    </li>
                    <li role="presentation">
                        <a href="#minute" aria-controls="minute" role="tab" data-toggle="tab">分钟</a></li>
                    <li role="presentation">
                        <a href="#hour" aria-controls="hour" role="tab" data-toggle="tab">小时</a>
                    </li>
                    <li role="presentation">
                        <a href="#day" aria-controls="day" role="tab" data-toggle="tab">日</a>
                    </li>
                    <li role="presentation">
                        <a href="#month" aria-controls="month" role="tab" data-toggle="tab">月</a>
                    </li>
                    <li role="presentation">
                        <a href="#week" aria-controls="week" role="tab" data-toggle="tab">周</a>
                    </li>
                    <li role="presentation">
                        <a href="#year" aria-controls="year" role="tab" data-toggle="tab">年</a>
                    </li>
                </ul>

                <!-- Tab Panes -->
                <div class="tab-content">

                    <!--秒-->
                    <div role="tabpanel" class="tab-pane active" id="second">
                        <div class="radio">
                            <label>
                                <input type="radio" name="secondType" value="All" checked="checked">
                                每秒 允许的通配符[, - * /]
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="secondType" value="Cyclic">
                                周期从
                                <input type="number" maxlength="2" max="59" min="0" value="0" id="secondTypeCyclic_1">
                                -
                                <input type="number" maxlength="2" max="59" min="1" value="1" id="secondTypeCyclic_2">
                                秒
                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="secondType" value="Interval">
                                从
                                <input type="number" maxlength="2" max="59" min="0" value="0" id="secondTypeInterval_1">
                                秒开始,每
                                <input type="number" maxlength="2" max="59" min="1" value="1" id="secondTypeInterval_2">
                                秒执行一次
                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="secondType" value="Assigned">
                                指定
                            </label>
                        </div>
                        <div style="margin-left: 20px;">
                            <div id="secondTypeAssigned_1" class="zhiding"></div>
                        </div>
                    </div>

                    <!--分钟-->
                    <div role="tabpanel" class="tab-pane" id="minute">
                        <div class="radio">
                            <label>
                                <input type="radio" name="minuteType" value="All" checked="checked">
                                每分钟 允许的通配符[, - * /]
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="minuteType" value="Cyclic">
                                周期从
                                <input type="number" maxlength="2" max="59" min="0" value="0" id="minuteTypeCyclic_1">
                                -
                                <input type="number" maxlength="2" max="59" min="1" value="1" id="minuteTypeCyclic_2">
                                分钟
                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="minuteType" value="Interval">
                                从
                                <input type="number" maxlength="2" max="59" min="0" value="0" id="minuteTypeInterval_1">
                                分钟开始,每
                                <input type="number" maxlength="2" max="59" min="1" value="1" id="minuteTypeInterval_2">
                                分钟执行一次
                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="minuteType" value="Assigned">
                                指定
                            </label>
                        </div>
                        <div style="margin-left: 20px;">

                            <div id="minuteTypeAssigned_1" class="zhiding"></div>
                        </div>
                    </div>

                    <!--小时-->
                    <div role="tabpanel" class="tab-pane" id="hour">

                        <div class="radio">
                            <label>
                                <input type="radio" name="hourType" value="All" checked="checked">
                                每小时 允许的通配符[, - * /]
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="hourType" value="Cyclic">
                                周期从
                                <input type="number" maxlength="2" max="23" min="0" value="0" id="hourTypeCyclic_1">
                                -
                                <input type="number" maxlength="2" max="23" min="1" value="1" id="hourTypeCyclic_2">
                                小时
                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="hourType" value="Interval">
                                从
                                <input type="number" maxlength="2" max="23" min="0" value="0" id="hourTypeInterval_1">
                                时开始,每
                                <input type="number" maxlength="2" max="23" min="1" value="1" id="hourTypeInterval_2">
                                小时执行一次
                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="hourType" value="Assigned">
                                指定
                            </label>
                        </div>
                        <div style="margin-left: 20px;">
                            <div id="hourTypeAssigned_1" class="zhiding"></div>
                        </div>

                    </div>


                    <!--日-->
                    <div role="tabpanel" class="tab-pane" id="day">

                        <div class="radio">
                            <label>
                                <input type="radio" name="dayType" value="All" checked="checked">
                                每日 允许的通配符[, - * / L W]
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="dayType" value="Cyclic">
                                周期从
                                <input type="number" maxlength="2" max="31" min="1" value="1" id="dayTypeCyclic_1">
                                -
                                <input type="number" maxlength="2" max="31" min="2" value="2" id="dayTypeCyclic_2">
                                日
                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="dayType" value="Interval">
                                从
                                <input type="number" maxlength="2" max="31" min="1" value="1" id="dayTypeInterval_1">
                                日开始,每
                                <input type="number" maxlength="2" max="31" min="1" value="1" id="dayTypeInterval_2">
                                日执行一次
                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="dayType" value="Assigned">
                                指定
                            </label>
                        </div>
                        <div style="margin-left: 20px;">
                            <div id="dayTypeAssigned_1" class="zhiding"></div>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="dayType" value="NotAssigned">
                                不指定
                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="dayType" value="RecentDays">
                                每月
                                <input type="number" id="dayTypeRecentDays_1" value="">
                                号最近的那个工作日
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="dayType" value="LastDayOfMonth">
                                本月最后一天
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="dayType" value="LastDayOfMonthRecentDays">
                                本月最后一个工作日
                            </label>
                        </div>
                    </div>


                    <!--月-->
                    <div role="tabpanel" class="tab-pane" id="month">
                        <div class="radio">
                            <label>
                                <input type="radio" name="monthType" value="All" checked="checked">
                                每月 允许的通配符[, - * /]
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="monthType" value="Cyclic">
                                周期从
                                <input type="number" maxlength="2" max="12" min="1" value="1" id="monthTypeCyclic_1">
                                -
                                <input type="number" maxlength="2" max="12" min="1" value="2" id="monthTypeCyclic_2">
                                月
                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="monthType" value="Interval">
                                从
                                <input type="number" maxlength="2" max="12" min="1" value="1" id="monthTypeInterval_1">
                                月开始,每
                                <input type="number" maxlength="2" max="12" min="1" value="1" id="monthTypeInterval_2">
                                月执行一次
                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="monthType" value="Assigned">
                                指定
                            </label>
                        </div>
                        <div style="margin-left: 20px;">

                            <div id="monthTypeAssigned_1" class="zhiding"></div>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="monthType" value="NotAssigned">
                                不指定
                            </label>
                        </div>
                    </div>


                    <!--周-->
                    <div role="tabpanel" class="tab-pane" id="week">
                        <div class="radio">
                            <label>
                                <input type="radio" name="weekType" value="All">
                                每周 允许的通配符[, - * / L #]
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="weekType" value="Cyclic">
                                周期从
                                <input type="number" maxlength="2" max="7" min="1" value="1" id="weekTypeCyclic_1">
                                -
                                <input type="number" maxlength="2" max="7" min="1" value="1" id="weekTypeCyclic_2">
                                周
                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="weekType" value="WeeksOfWeek">
                                第
                                <input type="number" maxlength="2" max="7" min="1" value="1" id="weekTypeWeeksOfWeek_1">
                                周 的星期
                                <input type="number" maxlength="2" max="7" min="1" value="1" id="weekTypeWeeksOfWeek_2">

                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="weekType" value="Assigned">
                                指定
                            </label>
                        </div>
                        <div style="margin-left: 20px;">
                            <div id="weekTypeAssigned_1" class="zhiding"></div>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="weekType" value="NotAssigned" checked="checked">
                                不指定
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="weekType" value="LastWeekOfMonth">
                                本月最后一个星期
                                <input type="number" id="weekTypeLastWeekOfMonth_1" value="1">

                            </label>
                        </div>
                    </div>


                    <!--年-->
                    <div role="tabpanel" class="tab-pane" id="year">

                        <div class="radio">
                            <label>
                                <input type="radio" name="yearType" value="All" checked="checked">
                                每年 允许的通配符[, - * /]
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="yearType" value="NotAssigned">
                                不指定
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="yearType" value="Cyclic">
                                周期从
                                <input type="number" id="yearTypeCyclic_1" value="2015">
                                -
                                <input type="number" id="yearTypeCyclic_2" value="2299">
                                年
                            </label>
                        </div>

                        <div class="radio">
                            <label>
                                <input type="radio" name="yearType" value="Assigned">
                                指定
                            </label>
                        </div>
                        <div style="margin-left: 20px;">
                            <div id="yearTypeAssigned_1" class="zhiding"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- 运行结果 -->
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">运行结果</h3>
        </div>

        <div class="panel-body">
            <form class="form-inline">
                <div class="form-group">
                    <label for="result" class="sr-only"></label>
                    <table style="height: 100px;">
                        <tbody>
                        <tr>
                            <td align="center">
                                秒
                            </td>
                            <td align="center">
                                分钟
                            </td>
                            <td align="center">
                                小时
                            </td>
                            <td align="center">
                                日
                            </td>
                            <td align="center">
                                月
                                <br>
                            </td>
                            <td align="center">
                                星期
                            </td>
                            <td align="center">
                                年
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" disabled name="v_secondType" class="form-control col" value="*"
                                       readonly="readonly">
                            </td>
                            <td>
                                <input type="text" disabled name="v_minuteType" class="form-control col" value="*"
                                       readonly="readonly">
                            </td>
                            <td>
                                <input type="text" disabled name="v_hourType" class="form-control col" value="*"
                                       readonly="readonly">
                            </td>
                            <td>
                                <input type="text" disabled name="v_dayType" class="form-control col" value="*"
                                       readonly="readonly">
                            </td>
                            <td>
                                <input type="text" disabled name="v_monthType" class="form-control col" value="*"
                                       readonly="readonly">
                            </td>
                            <td>
                                <input type="text" disabled name="v_weekType" class="form-control col" value="?"
                                       readonly="readonly">
                            </td>
                            <td>
                                <input type="text" disabled name="v_yearType" class="form-control col"
                                       readonly="readonly">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="8">
                                <input type="text" class="form-control cron-val" name="cron" id="result">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="8" class="cron-btn">
                                <input type="button" class="btn btn-primary" value="最近10次运行时间" id="runDate">
                                <input type="button" class="btn btn-success" value="解析表达式到界面" id="analysis">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="8"></td>
                        </tr>
                        <tr>
                            <td colspan="8">
                                <dl id="runTime">
                                </dl>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </form>
        </div>
    </div>

    <!-- 常用示例 -->
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">常用表达式</h3>
        </div>

        <div class="panel-body">
            <div>
                <p>
                  <span><span style="line-height:18px;color:#0000FF;"><span
                          style="line-height:18px;color:#000000;"></span></span><span><span
                          style="line-height:18px;color:#0000FF;">0/2 * * * * ?</span></span>&nbsp;&nbsp;</span>&nbsp;表示每2秒
                    执行任务
                </p>
                <p>
                  <span><span style="line-height:18px;color:#0000FF;"><span
                          style="line-height:18px;color:#000000;"></span></span><span><span
                          style="line-height:18px;color:#0000FF;">0 0/2 * * * ?&nbsp;</span></span>&nbsp;&nbsp;</span>&nbsp;表示每2分钟
                    执行任务
                </p>
                <p>
                  <span><span style="line-height:18px;color:#0000FF;"><span
                          style="line-height:18px;color:#000000;"></span></span><span><span
                          style="line-height:18px;color:#0000FF;">0 0 2 1 * ?</span></span>&nbsp;&nbsp;</span>&nbsp;表示在每月的1日的凌晨2点调整任务
                </p>
                <p>
                <span style="line-height:18px;color:#0000FF;"><span
                        style="line-height:18px;color:#000000;"></span></span><span><span
                        style="line-height:18px;color:#0000FF;">0 15 10 ? * MON-FRI</span>&nbsp;</span>&nbsp;
                    表示周一到周五每天上午10:15执行作业
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 15 10 ? 6L 2002-2006</span></span>&nbsp;&nbsp;
                    表示2002-2006年的每个月的最后一个星期五上午10:15执行作
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 0 10,14,16 * * ?</span></span>&nbsp;&nbsp;&nbsp;每天上午10点，下午2点，4点&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 0/30 9-17 * * ?</span></span>&nbsp;&nbsp;
                    朝九晚五工作时间内每半小时&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 0 12 ? * WED</span></span>&nbsp;&nbsp;
                    &nbsp;表示每个星期三中午12点&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 0 12 * * ?</span></span>&nbsp;&nbsp;&nbsp;每天中午12点触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 15 10 ? * * &nbsp;</span></span>&nbsp;&nbsp;每天上午10:15触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 15 10 * * ?</span></span>&nbsp;&nbsp;
                    &nbsp; 每天上午10:15触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 15 10 * * ?</span>&nbsp;</span>&nbsp;
                    &nbsp;每天上午10:15触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 15 10 * * ? 2005</span></span>&nbsp;&nbsp;
                    &nbsp;2005年的每天上午10:15触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 * 14 * * ?</span></span>&nbsp;&nbsp;
                    &nbsp; 在每天下午2点到下午2:59期间的每1分钟触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 0/5 14 * * ?</span></span>&nbsp;&nbsp;
                    &nbsp;在每天下午2点到下午2:55期间的每5分钟触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 0/5 14,18 * * ?</span></span>&nbsp;&nbsp;
                    &nbsp; 在每天下午2点到2:55期间和下午6点到6:55期间的每5分钟触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 0-5 14 * * ?</span>&nbsp;</span>&nbsp;
                    &nbsp;在每天下午2点到下午2:05期间的每1分钟触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 10,44 14 ? 3 WED</span></span>&nbsp;&nbsp;
                    &nbsp;每年三月的星期三的下午2:10和2:44触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 15 10 ? * MON-FRI</span>&nbsp;</span>&nbsp;
                    &nbsp;周一至周五的上午10:15触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 15 10 15 * ?</span>&nbsp;</span>&nbsp;
                    &nbsp;每月15日上午10:15触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 15 10 L * ?</span>&nbsp;</span>&nbsp;
                    &nbsp;每月最后一日的上午10:15触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 15 10 ? * 6L</span>&nbsp;</span>&nbsp;
                    &nbsp;每月的最后一个星期五上午10:15触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 15 10 ? * 6L 2002-2005</span></span>&nbsp;&nbsp;
                    2002年至2005年的每月的最后一个星期五上午10:15触发&nbsp;
                </p>
                <p>
                    <span><span style="line-height:18px;color:#0000FF;">0 15 10 ? * 6#3</span></span>&nbsp;&nbsp;
                    每月的第三个星期五上午10:15触发
                </p>
            </div>
        </div>
    </div>

    <script th:src="${public_cdn + '/jquery/1.11.3/jquery.min.js'}"></script>
    <script th:src="${public_cdn + '/twitter-bootstrap/3.3.5/js/bootstrap.min.js'}"></script>
    <script th:src="${public_cdn + '/chosen/1.4.2/chosen.jquery.min.js'}"></script>
    <script src="/static/tool/cron/cron.js"></script>
</div>
</body>
</html>
